<template>
  <div class="overview-content">
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="24" style="margin-bottom: 20px">
        <div class="chart-wrapper">
          <el-table
            :data="tableData"
            style="width: 100%"
             
            class="card-table"
            :border="false"
            stripe
            :default-sort="{ prop: 'five' }"
          >
            <el-table-column label="序号" min-width="50" align="center">
              <!-- eslint-disable-next-line vue/no-unused-vars -->
              <template slot-scope="scope">
                {{ scope.$index + 1 }}
              </template>
            </el-table-column>

            <el-table-column
              label="租约编号"
              prop="leaseNo"
              min-width="120"
              align="center"
            >
              <template slot-scope="scope">
                <router-link
                  :to="{
                    path: 'leasepageProcess',
                    query: { id: scope.row.processId, isDetail: true },
                  }"
                  class="linkBtn"
                >
                  {{ scope.row.leaseNo }}
                </router-link>
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              label="地址"
              prop="address"
              min-width="150"
              align="center"
            >
              <template slot-scope="scope">
                <router-link
                  :to="{ path: 'pageDetail', query: { id: scope.row.houseId } }"
                  class="linkBtn"
                >
                  {{ scope.row.address }}
                </router-link>
              </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" align="center">
              <template slot-scope="scope">
                <span>{{ leaseStatusOptions[scope.row.status] }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="operator" label="运营" align="center" />
            <el-table-column
              prop="propertyManager"
              label="物业经理"
              align="center"
            />
            <el-table-column
              prop="hireDate"
              label="招租日期"
              align="center"
              min-width="100"
            >
              <template slot-scope="scope">
                <span>{{ formatDot(scope.row.hireDate) }}</span>
              </template>
            </el-table-column>

            <el-table-column
              prop="leaseTerm"
              label="租期"
              min-width="80"
              align="center"
            >
              <template slot-scope="scope">
                <span>{{
                  scope.row.leaseTerm ? scope.row.leaseTerm + "个月" : ""
                }}</span>
              </template>
            </el-table-column>

            <el-table-column
              prop="beginDate"
              label="起始日期"
              align="center"
              min-width="120"
            >
              <template slot-scope="scope">
                <span>{{ formatDot(scope.row.beginDate) }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="endDate"
              label="截止日期"
              align="center"
              min-width="120"
            >
              <template slot-scope="scope">
                <span>{{ formatDot(scope.row.endDate) }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="rent"
              label="租金"
              align="center"
              width="100"
            />
          </el-table>
          <!---->
          <el-pagination
            background
            :current-page="listQuery.page"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="listQuery.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
          <!---->
        </div>
      </el-col>
    </el-row>
    <!---->
    <myModal :obj="objMo">
      <div class="mpdalBody">
        <el-form
          ref="form"
          :model="sizeForm"
          label-width="55px"
          class="formDiv"
        >
          <el-form-item label="" :required="true">
            <el-radio-group v-model="radio">
              <el-radio :label="1">未交割房源</el-radio>
              <el-radio :label="2">在租房源</el-radio>
              <el-radio :label="3">闲置房源</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <p class="text-center caC">
          说明：不同的房产来源走的交接流程不同，请谨慎选择。
        </p>
      </div>
    </myModal>
    <!---->
  </div>
</template>

<script>
import myModal from "@/components/Modal";
import { page } from "@/api/lease";
import { replaceParamEmptyString, formatDot } from "@/utils/common";
import { leaseStatusOptions } from "@/utils/consts";

export default {
  components: { myModal },
  props: {
    // eslint-disable-next-line vue/require-default-prop
    obj: {
      type: Object,
    },
  },
  data() {
    return {
      leaseStatusOptions,
      formatDot,
      total: 0,
      page: 1,
      tableData: [],
      objMo: {
        show: false,
        title: "选择房产来源",
        width: "536px",
      },
      sizeForm: {},
      radio: 3,
      listQuery: {
        page: 1,
        keyword: "",
        endDate: "",
        limit: 10,
        propertyManager: "",
        operator: "",
        status: "",
      },
    };
  },
  created() {
    const queryObj = this.$route.query;
    if (queryObj.status) {
      this.listQuery.status = Number(queryObj.status);
    }
    this.getList();
  },
  mounted() {
    this.$parent.$on("searchData", (val) => {
      this.listQuery = val;
      this.getList();
    });
  },
  methods: {
    getList() {
      this.listQuery = replaceParamEmptyString(this.listQuery, [
        "keyword",
        "endDate",
        "propertyManager",
        "saleDate",
        "saleManager",
        "status",
        "operator",
      ]);
      page(this.listQuery).then((response) => {
        this.tableData = response.data.records;
        this.total = response.data.total;
      });
    },
    handleClick() {
      this.objMo.show = true;
    },
    handleSizeChange(val) {
      this.listQuery.page = 1;
      this.listQuery.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getList();
    },
    close() {
      this.objMo.show = false;
    },
    save() {
      this.objMo.show = false;
      if (this.radio === 1) {
        this.$router.push({ path: "pageProcess", query: {} });
      } else if (this.radio === 2) {
        this.$router.push({ path: "regroup", query: {} });
      } else if (this.radio === 3) {
        this.$router.push({ path: "IdleHousing", query: {} });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-table th.is-leaf,
::v-deep .el-table td,
::v-deep .el-table__body {
  border: 0;
}
::v-deep .el-table::before,
::v-deep .el-table__fixed-right::before {
  display: none;
}
::v-deep th {
  background: #f7f7f7;
  font-weight: normal;
  color: #101010;
}
</style>

